<template>
  <div>
    <!-- 显示历史记录 -->
    <el-card>
      <el-table style="width: 100%; margin-top: 50px" border :data="list">
        <el-table-column
          type="index"
          label="序号"
          width="80px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="buyerId"
          label="用户账号"
          
        ></el-table-column>
        <el-table-column
          prop="wares.waresName"
          label="商品名"
          width="150px"
        ></el-table-column>
        <el-table-column
          prop="afterSalesTitle"
          label="售后申请标题"
          width="150px"
        ></el-table-column>
        <el-table-column
          prop="afterSalesDetail"
          label="售后申请详情"
          width="200px"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="prop"
          label="售后申请图片"
          width="200px"
          align="center"
        >
          <template slot-scope="{ row }">
            <div class="block">
              <el-carousel
                height="80px"
                :autoplay="false"
                indicator-position="none"
              >
                <el-carousel-item
                  v-for="item in row.pictureList"
                  :key="item"
                >
                  <img :src="item" alt="123" width="80px" height="80px" />
                </el-carousel-item>
              </el-carousel>
            </div> </template
        ></el-table-column>
        <el-table-column
          prop="afterSalesState"
          label="售后申请状态"
          width="150px"
          align="center"
        ></el-table-column>
        <el-table-column prop="prop" label="操作" width="250px">
          <template slot-scope="{ row }">
            <div v-if="row.afterSalesState=='未处理'">
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="changeAfterSales(row.afterSalesId,1)"
              >退货</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="changeAfterSales(row.afterSalesId,2)"
              >退款</el-button
            >
        </div>
        <div v-else>售后已完成</div>
        
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        style="margin-top: 20px; text-align: center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        layout="sizes, prev, pager, next, total"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "AfterSales",

  data() {
    return {
      page: 1,
      limit: 5,
      total: 0,
      list: [],
    };
  },

  mounted() {
    this.getAfterSalesList();
  },

  methods: {
    handleSizeChange(limit) {
      this.limit = limit;
      this.getAfterSalesList();
    },
    handleCurrentChange(pager) {
      this.page = pager;
      this.getAfterSalesList();
    },
    //获取所有售后申请
    async getAfterSalesList() {
      const { page, limit } = this;
      let result = await this.$API.afterSales.reqAfterSalesList(page, limit);
      if (result.code == 200) {
        this.total = result.data.total;
        this.list = result.data.afterSalesList;
        for (let i of this.list) {
          i.afterSalesState = this.afterSalesState(i.afterSalesState);
        }
      } else {
        return Promise.reject(new Error("false"));
      }
    },
    //正确显示售后申请状态
    afterSalesState(afterSalesState) {
      if (afterSalesState == 0) {
        return "未处理";
      } else if (afterSalesState == 1) {
        return "已退货";
      } else if (afterSalesState == 2) {
        return "已退款";
      } else {
        return "问题已解决";
      }
    },
    //修改售后申请状态
    async changeAfterSales(afterSalesId, afterSalesState) {
      let result = await this.$API.afterSales.reqChangeAfterSales(
        afterSalesId,
        afterSalesState
      );
      if (result.code == 200) {
        this.$message({
          message: result.data,
          type: "success",
        });
        this.getAfterSalesList();
      } else {
        return Promise.reject(new Error("false"));
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
